summaryrefslogtreecommitdiff
path: root/src/pages/shop/promo/[slug].tsx
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2024-09-04 09:54:44 +0700
committerit-fixcomart <it@fixcomart.co.id>2024-09-04 09:54:44 +0700
commitf6a398c036d2ab833ecb798fa88e641e2f801bb0 (patch)
tree7aead541e26b5166ae3d2049fc732c7030e4e9c6 /src/pages/shop/promo/[slug].tsx
parentcbdeecd2fb8770afe46a374292e6ed3e5ec48214 (diff)
parentad168bf46919b46f708625b7d2fdc56606ec9af6 (diff)
Merge branch 'update-allPromo-fetch' into backup-release
Diffstat (limited to 'src/pages/shop/promo/[slug].tsx')
-rw-r--r--src/pages/shop/promo/[slug].tsx523
1 files changed, 0 insertions, 523 deletions
diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx
deleted file mode 100644
index aaee1249..00000000
--- a/src/pages/shop/promo/[slug].tsx
+++ /dev/null
@@ -1,523 +0,0 @@
-import dynamic from 'next/dynamic'
-import NextImage from 'next/image';
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import Seo from '../../../core/components/Seo'
-import Promocrumb from '../../../lib/promo/components/Promocrumb'
-import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi'
-import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx'
-import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card'
-import { IPromotion } from '../../../../src-migrate/types/promotion'
-import React from 'react'
-import { SolrResponse } from "../../../../src-migrate/types/solr.ts";
-import DesktopView from '../../../core/components/views/DesktopView';
-import MobileView from '../../../core/components/views/MobileView';
-import 'swiper/swiper-bundle.css';
-import useDevice from '../../../core/hooks/useDevice'
-import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion';
-import ProductFilter from '../../../lib/product/components/ProductFilter';
-import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
-import { formatCurrency } from '../../../core/utils/formatValue';
-import Pagination from '../../../core/components/elements/Pagination/Pagination';
-import SideBanner from '../../../../src-migrate/modules/side-banner';
-import whatsappUrl from '../../../core/utils/whatsappUrl';
-import { cons, toQuery } from 'lodash-contrib';
-import _ from 'lodash';
-import useActive from '../../../core/hooks/useActive';
-
-const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout'))
-
-export default function PromoDetail() {
- const router = useRouter()
- const { slug = '', brand ='', category='', priceFrom = '', priceTo = '', page = '1' } = router.query
- const [promoItems, setPromoItems] = useState<any[]>([])
- const [promoData, setPromoData] = useState<IPromotion[] | null>(null)
- const [currentPage, setCurrentPage] = useState(parseInt(page as string, 10) || 1);
- const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman
- const [loading, setLoading] = useState(true);
- const { isMobile, isDesktop } = useDevice()
- const [brands, setBrands] = useState<Brand[]>([]);
- const [categories, setCategories] = useState<Category[]>([]);
- const [brandValues, setBrandValues] = useState<string[]>([]);
- const [categoryValues, setCategoryValues] = useState<string[]>([]);
- const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular');
- const popup = useActive();
- const prefixUrl = `/shop/promo/${slug}`
-
- useEffect(() => {
- if (router.query.brand) {
- let brandsArray: string[] = [];
- if (Array.isArray(router.query.brand)) {
- brandsArray = router.query.brand;
- } else if (typeof router.query.brand === 'string') {
- brandsArray = router.query.brand.split(',').map((brand) => brand.trim());
- }
- setBrandValues(brandsArray);
- } else {
- setBrandValues([]);
- }
-
- if (router.query.category) {
- let categoriesArray: string[] = [];
-
- if (Array.isArray(router.query.category)) {
- categoriesArray = router.query.category;
- } else if (typeof router.query.category === 'string') {
- categoriesArray = router.query.category.split(',').map((category) => category.trim());
- }
- setCategoryValues(categoriesArray);
- } else {
- setCategoryValues([]);
- }
- }, [router.query.brand, router.query.category]);
-
- interface Brand {
- brand: string;
- qty: number;
- }
-
- interface Category {
- name: string;
- qty: number;
- }
-
- useEffect(() => {
- const loadPromo = async () => {
- setLoading(true);
- const brandsData: Brand[] = [];
- const categoriesData: Category[] = [];
-
- const pageNumber = Array.isArray(page) ? parseInt(page[0], 10) : parseInt(page, 10);
- setCurrentPage(pageNumber)
-
- try {
- const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`,0,100);
- setPromoItems(items);
-
- if (items.length === 0) {
- setPromoData([])
- setLoading(false);
- return;
- }
-
- const brandArray = Array.isArray(brand) ? brand : brand.split(',');
- const categoryArray = Array.isArray(category) ? category : category.split(',');
-
- const promoDataPromises = items.map(async (item) => {
-
- try {
- let brandQuery = '';
- if (brand) {
- brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR ');
- brandQuery = `(${brandQuery})`;
- }
-
- let categoryQuery = '';
- if (category) {
- categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
- categoryQuery = `(${categoryQuery})`;
- }
-
- let priceQuery = '';
- if (priceFrom && priceTo) {
- priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`;
- } else if (priceFrom) {
- priceQuery = `price_f:[${priceFrom} TO *]`;
- } else if (priceTo) {
- priceQuery = `price_f:[* TO ${priceTo}]`;
- }
-
- let combinedQuery = '';
- let combinedQueryPrice = `${priceQuery}`;
- if (brand && category && priceFrom || priceTo) {
- combinedQuery = `${brandQuery} AND ${categoryQuery} `;
- } else if (brand && category) {
- combinedQuery = `${brandQuery} AND ${categoryQuery}`;
- } else if (brand && priceFrom || priceTo) {
- combinedQuery = `${brandQuery}`;
- } else if (category && priceFrom || priceTo) {
- combinedQuery = `${categoryQuery}`;
- } else if (brand) {
- combinedQuery = brandQuery;
- } else if (category) {
- combinedQuery = categoryQuery;
- }
-
- if (combinedQuery && priceFrom || priceTo) {
- const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
- const product = response.response.docs[0];
- const product_id = product.id;
- const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`,0,100);
- return response2;
- }else if(combinedQuery){
- const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
- const product = response.response.docs[0];
- const product_id = product.id;
- const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `,0,100);
- return response2;
- } else {
- const response = await fetchPromoItemsSolr(`id:${item.id}`,0,100);
- return response;
- }
- } catch (fetchError) {
- return [];
- }
- });
-
- const promoDataArray = await Promise.all(promoDataPromises);
- const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
- setPromoData(mergedPromoData);
-
- const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => {
- if (promoData) {
- const dataBrandCategory = promoData.map(async (item) => {
- let response;
- if(category){
- const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
- response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`);
- }else{
- response = await fetchVariantSolr(`id:${item.products[0].product_id}`)
- }
-
-
- if (response.response?.docs?.length > 0) {
- const product = response.response.docs[0];
- const manufactureNameS = product.manufacture_name;
- if (Array.isArray(manufactureNameS)) {
- for (let i = 0; i < manufactureNameS.length; i += 2) {
- const brand = manufactureNameS[i];
- const qty = 1;
- const existingBrandIndex = brandsData.findIndex(b => b.brand === brand);
- if (existingBrandIndex !== -1) {
- brandsData[existingBrandIndex].qty += qty;
- } else {
- brandsData.push({ brand, qty });
- }
- }
- }
-
- const categoryNameS = product.category_name;
- if (Array.isArray(categoryNameS)) {
- for (let i = 0; i < categoryNameS.length; i += 2) {
- const name = categoryNameS[i];
- const qty = 1;
- const existingCategoryIndex = categoriesData.findIndex(c => c.name === name);
- if (existingCategoryIndex !== -1) {
- categoriesData[existingCategoryIndex].qty += qty;
- } else {
- categoriesData.push({ name, qty });
- }
- }
- }
- }
- });
-
- return Promise.all(dataBrandCategory);
- }
- });
-
- await Promise.all(dataBrandCategoryPromises);
- setBrands(brandsData);
- setCategories(categoriesData);
- setLoading(false);
-
- } catch (loadError) {
- // console.error("Error loading promo items:", loadError)
- setLoading(false);
- }
- }
-
- if (slug) {
- loadPromo()
- }
- },[slug, brand, category, priceFrom, priceTo, currentPage]);
-
-
- function capitalizeFirstLetter(string) {
- string = string.replace(/_/g, ' ');
- return string.replace(/(^\w|\s\w)/g, function(match) {
- return match.toUpperCase();
- });
- }
-
- const handleDeleteFilter = async (source, value) => {
- let params = {
- q: router.query.q,
- orderBy: '',
- brand: brandValues.join(','),
- category: categoryValues.join(','),
- priceFrom: priceFrom || '',
- priceTo: priceTo || '',
- };
-
- let brands = brandValues;
- let catagories = categoryValues;
- switch (source) {
- case 'brands':
- brands = brandValues.filter((item) => item !== value);
- params.brand = brands.join(',');
- await setBrandValues(brands);
- break;
- case 'category':
- catagories = categoryValues.filter((item) => item !== value);
- params.category = catagories.join(',');
- await setCategoryValues(catagories);
- break;
- case 'price':
- params.priceFrom = '';
- params.priceTo = '';
- break;
- case 'delete':
- params = {
- q: router.query.q,
- orderBy: '',
- brand: '',
- category: '',
- priceFrom: '',
- priceTo: '',
- };
- break;
- }
-
- handleSubmitFilter(params);
- };
- const handleSubmitFilter = (params) => {
- params = _.pickBy(params, _.identity);
- params = toQuery(params);
- router.push(`${slug}?${params}`);
- };
-
- const visiblePromotions = promoData?.slice( (currentPage-1) * itemsPerPage, currentPage * 12)
-
- const toQuery = (obj) => {
- const str = Object.keys(obj)
- .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
- .join('&')
- return str
- }
-
- const whatPromo = capitalizeFirstLetter(slug)
- const queryWithoutSlug = _.omit(router.query, ['slug'])
- const queryString = toQuery(queryWithoutSlug)
-
- return (
- <BasicLayout>
- <Seo
- title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`}
- description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif'
- />
- <Promocrumb brandName={whatPromo} />
- <MobileView>
- <div className='p-4 pt-0'>
- <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1>
-
- <FilterChoicesComponent
- brandValues={brandValues}
- categoryValues={categoryValues}
- priceFrom={priceFrom}
- priceTo={priceTo}
- handleDeleteFilter={handleDeleteFilter}
- />
- {promoItems.length >= 1 && (
- <div className='flex items-center gap-x-2 mb-5 justify-between'>
- <div>
- <button
- className='btn-light py-2 px-5 h-[40px]'
- onClick={popup.activate}
- >
- Filter
- </button>
- </div>
- </div>
- )}
-
- {loading ? (
- <div className='container flex justify-center my-4'>
- <LogoSpinner width={48} height={48} />
- </div>
- ) : promoData && promoItems.length >= 1 ? (
- <>
- <div className='grid grid-cols-1 gap-x-1 gap-y-1'>
- {visiblePromotions?.map((promotion) => (
- <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
- <ProductPromoCard promotion={promotion}/>
- </div>
- ))}
- </div>
- </>
- ) : (
- <div className="text-center my-8">
- <p>Belum ada promo pada kategori ini</p>
- </div>
- )}
-
- <Pagination
- pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)}
- currentPage={currentPage}
- url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
- className='mt-6 mb-2'
- />
- <ProductFilter
- active={popup.active}
- close={popup.deactivate}
- brands={brands || []}
- categories={categories || []}
- prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`}
- defaultBrand={null}
- />
- </div>
-
- </MobileView>
- <DesktopView>
- <div className='container mx-auto flex mb-3 flex-col'>
- <div className='w-full pl-6'>
- <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1>
- <div className=' w-full h-full flex flex-row items-center '>
-
- <div className='detail-filter w-1/2 flex justify-start items-center mt-4'>
-
- <FilterChoicesComponent
- brandValues={brandValues}
- categoryValues={categoryValues}
- priceFrom={priceFrom}
- priceTo={priceTo}
- handleDeleteFilter={handleDeleteFilter}
- />
- </div>
- <div className='Filter w-1/2 flex flex-col'>
-
- <ProductFilterDesktop
- brands={brands || []}
- categories={categories || []}
- prefixUrl={'/shop/promo'}
- // defaultBrand={null}
- />
- </div>
- </div>
- {loading ? (
- <div className='container flex justify-center my-4'>
- <LogoSpinner width={48} height={48} />
- </div>
- ) : promoData && promoItems.length >= 1 ? (
- <>
- <div className='grid grid-cols-1 gap-x-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
- {visiblePromotions?.map((promotion) => (
- <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] ">
- <ProductPromoCard promotion={promotion}/>
- </div>
- ))}
- </div>
- </>
- ) : (
- <div className="text-center my-8">
- <p>Belum ada promo pada kategori ini</p>
- </div>
- )}
- <div className='flex justify-between items-center mt-6 mb-2'>
- <div className='pt-2 pb-6 flex items-center gap-x-3'>
- <NextImage
- src='/images/logo-question.png'
- alt='Logo Question Indoteknik'
- width={60}
- height={60}
- />
- <div className='text-gray_r-12/90'>
- <span>
- Barang yang anda cari tidak ada?{' '}
- <a
- href={
- router.query?.q
- ? whatsappUrl('productSearch', {
- name: router.query.q,
- })
- : whatsappUrl()
- }
- className='text-danger-500'
- >
- Hubungi Kami
- </a>
- </span>
- </div>
- </div>
-
-
-
- <Pagination
- pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)}
- currentPage={currentPage}
- url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
- className='mt-6 mb-2'
- />
- </div>
-
- </div>
- </div>
- </DesktopView>
- </BasicLayout>
- )
- }
-
-const FilterChoicesComponent = ({
- brandValues,
- categoryValues,
- priceFrom,
- priceTo,
- handleDeleteFilter,
- }) => (
- <div className='flex items-center mb-4'>
- <HStack spacing={2} className='flex-wrap'>
- {brandValues?.map((value, index) => (
- <Tag
- size='lg'
- key={index}
- borderRadius='lg'
- variant='outline'
- colorScheme='gray'
- >
- <TagLabel>{value}</TagLabel>
- <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
- </Tag>
- ))}
-
- {categoryValues?.map((value, index) => (
- <Tag
- size='lg'
- key={index}
- borderRadius='lg'
- variant='outline'
- colorScheme='gray'
- >
- <TagLabel>{value}</TagLabel>
- <TagCloseButton
- onClick={() => handleDeleteFilter('category', value)}
- />
- </Tag>
- ))}
- {priceFrom && priceTo && (
- <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
- <TagLabel>
- {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)}
- </TagLabel>
- <TagCloseButton
- onClick={() => handleDeleteFilter('price', priceFrom)}
- />
- </Tag>
- )}
- {brandValues?.length > 0 ||
- categoryValues?.length > 0 ||
- priceFrom ||
- priceTo ? (
- <span>
- <button
- className='btn-transparent py-2 px-5 h-[40px] text-red-700'
- onClick={() => handleDeleteFilter('delete')}
- >
- Hapus Semua
- </button>
- </span>
- ) : (
- ''
- )}
- </HStack>
- </div>
-);